import React, { memo } from 'react'
import { connect } from 'react-redux'
import { decreament, increment } from '../../store'

const Home = memo((props) => {
  function incrementClick() {
    props.increment(10)
  }
  function decrementClick() {
    props.decreament(10)
  }
  return (
    <div>
      <h3>Home</h3>
      <h6>counter:{props.counter}</h6>
      <div>
        <button onClick={incrementClick}>but+10</button>
        <button onClick={decrementClick}>but-10</button>
      </div>
    </div>
  )
})

const mapToStateProps = state => ({
  counter:state.counter
})
const mapToDispatchProps = dispatch => ({
  increment: counter => dispatch(increment(counter)),
  decreament: counter => dispatch(decreament(counter))
})

export default connect(mapToStateProps,mapToDispatchProps)(Home)
